<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度</title>
    <style>
        .container {
            margin: 0 auto;
            text-align: center;
        }

        #words {
            width: 70%;
            height: 30px;
            line-height: 30px;
        }

        #btn {
            width: 50%;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>百度</h1>
        <div class="search-container">
            <form id="form">
                <input type="text" id="words">
                <br><br><br>
                <input type="submit" id="btn" value="点击百度">
            </form>
        </div>
    </div>

    <script>
        var input = document.getElementById('words')
        var form = document.getElementById('form')
        var url = 'https://www.baidu.com/s?ie=utf-8&wd='

        form.onsubmit = function () {
            var wd = encodeURIComponent(input.value)
            location.href = url + wd
            return false
        }
    </script>
</body>
</html>